import { Button, Card, Divider, message, Select, Table } from "antd";
import React, { useEffect } from "react";
import { useState } from "react/cjs/react.development";
import { pageRequest } from "../../../utils/pageRequest";
import "./FileList.css"
import {
  getFiles, 
  getCities,
  getTypes,
} from "../../../service/filedownload"

const { Option } = Select;

const style = {
  width: "15%",
  marginRight: "10px",
};

function FileList() {
    const Headers = [
        {
          title: "序号",
          key: "id",
          width: "7%",
          align: "center",
          render: (txt, record, index) => index + 1,
        },
        {
          title: "文件名",
          dataIndex: "fileName",
          // width: "20%",
          align: "center",
        },
        {
          title: "更新时间",
          dataIndex: "updateTime",
          width: "15%",
          align: "center",
        },
        {
          title: "文件大小",
          dataIndex: "size",
          width: "15%",
          align: "center",
        },
        {
          title: "来源",
          dataIndex: "source",
          width: "10%",
          align: "center",
        },
        {
          title: "下载",
          dataIndex: "download",
          width: "15%",
          align: "center",
          render: (txt, record, index) => {
            return (
              <Button
                type="primary"
                size="small"
                onClick={() => {
                  if (!record.link) {
                    message.error("下载失败，请检查资源是否存在");
                    return false;
                  }
                  window.open(record.link);
                }}
              >
                下载
              </Button>
            );
          },
        },
      ];
      const [cityList, setCityList] = useState(["北京", "武汉"]);
      const [Type, setType] = useState(["POI", "AOI"]);
      const [dataSource, setDataSource] = useState([
        {
            fileName: "武汉汽车",
            updateTime: "2021-9-12",
            size: "17M",
            source: "高德",
          },
          {
            fileName: "武汉餐饮",
            updateTime: "2021-9-12",
            size: "17M",
            source: "高德",
            link: "http://www.baidu.com",
          },
      ]);
      const [total, setTotal] = useState(dataSource.length);
    
      useEffect(() => {
        getCities()
          .then((res) => {
            if (res.status === "200") {
              setCityList(res.result);
            } else {
              message.error("城市列表获取出错");
            }
          })
          .catch((err) => {
            console.log("DataDownload_cities获取出错" + err);
          });
        getTypes()
          .then((res) => {
            if (res.status === "200") {
              setType(res.result);
            } else {
              message.error("大类列表获取出错");
            }
          })
          .catch((err) => {
            console.log("DataDownload_types获取出错" + err);
          });
      }, []);
      return (
        <>
          <Card>
            <div className="UserSelector">
              城市：
              <Select
                showSearch
                style={style}
                placeholder="Select a person"
                optionFilterProp="children"
              >
                {cityList.map((cityName) => {
                  return <Option value={cityName}>{cityName}</Option>;
                })}
              </Select>
              大类：
              <Select
                showSearch
                style={style}
                placeholder="Select a person"
                optionFilterProp="children"
              >
                {Type.map((type) => {
                  return <Option value={type}>{type}</Option>;
                })}
              </Select>
              
              <Button type="primary" style={{ marginLeft: "20px" }} size="middle">
                搜索
              </Button>
              <p style={{display:"inline", marginLeft:"2%", fontSize:"14px"}}>共有结果 {total} 条</p>
            </div>
            <Divider />
            <Table
              rowKey="title"
              columns={Headers}
              dataSource={dataSource}
              bordered={true}
              pagination={{
                position:['bottomCenter'],
                total: total,
                pageSize: 10,
                onChange: (page, pageSize) =>
                  pageRequest(page, pageSize, getFiles, setDataSource, setTotal),
              }}
            />
          </Card>
        </>
      );
    }
    

export default FileList
